import React, { Component } from 'react';
import {
	StyleSheet, View, Text, Image, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { BaseItem } from './BaseItem';

const titleImgObj = require('../../../../imgs/global/down.png');
const scale = GLOBAL.SCALE;
export class AnnexInfo extends Component {
	constructor(props) {
		super(props);
	}

	render () {
		const { data, onPress } = this.props;
		return (
			<View>
				{
					data && data.length ? data.map((item, index) => {
						const { fileName } = item;
						return (
							<TouchableOpacity key={index} style={styles.itemView} onPress={() => { onPress && onPress(item) }}>
								<Text style={styles.value}>{fileName || '--'}</Text>
								<Image style={styles.imgStyle} source={titleImgObj} />
							</TouchableOpacity>
						)
					}) : null
				}
			</View>

		)
	}
}

const styles = StyleSheet.create({
	itemView: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		marginTop: 12 * scale
	},
	value: {
		fontSize: 12 * scale,
	},
	imgStyle: {
		tintColor: '#D8D8D8',
		width: 10 * scale,
		height: 6 * scale,
		transform: [{ rotate: '-90deg' }]
	},
})